<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <link type="text/css" rel="stylesheet" href="public/login.css">
    <title>欢迎用户登录</title>
    <script type="text/javascript" src="public/jquery-3.2.0.min.js"></script>
</head>
<body onload="randnum()">
<div class="box">
    <div class="div">
        <div class="nav">
            <ul style="list-style: none">
                <a id="zc" href="?c=Reg&a=index" >注册</a>
                <a id="dl" href="?c=Index&a=index">登录</a>
            </ul>
        </div>
        <h1>欢迎使用在线系统</h1>
    </div>
    <div class="login" id="login1">
        <h1>用户登录</h1>
        <div class="main1">
            <div class="div1">
                <span class="lab">账号：</span>
                <input type="text" id="id" placeholder="请输入您的账号">
                <span class="tip3"></span>
            </div>
            <div class="div1">
                <span class="lab">密码：</span>
                <input type="password" id="password" placeholder="请输入密码">
                <span class="tip4"></span>
            </div>
            <div class="code">
                <span class="lab">验证码：</span>
                <input type="text" id="num" placeholder="请输入验证码">
                <div  class="div2"></div><span id="warn"></span>
            </div>
            <div class="div3">
                <input type="button" id="login" value="登录">
            </div>
        </div>
    </div>
</div>
</body>
<script type="text/javascript">

    //生成随机数方法//
    function randnum()
    {
        var arr = Array("0","1","2","3","4","5","6","7","8","9");
        var code = "";
        for(var i=0;i < 4;i++)
        {
            var rand = Math.random()*10 ;
            var rand = Math.floor(rand);
            code += arr[rand];
        };
        $(".div2").text(code);
    }

    //验证码点击刷新
    $(".div2").bind("click",function()
    {
        randnum()
    });
    //给输入框添加属性
    $("#id").attr("index","0");
    $("#password").attr("index","0");
    $("#num").attr("index","0");


    // 登录按钮绑定事件
    $("#login").bind("click",function()
    {
        var id1 = $("#id").val();
        var pasd = $("#password").val();
        var num1 = $("#num").val();
        var code1 = $(".div2").text();
        //二次判断格式是否正确
        if (id1.length == 0) {
            $(".tip3").css("color", "#FF0512");
            $(".tip3").text("✘请输入账号！");
        } else {
            $("#id").attr("index", "1");
        }

        if (pasd.length == 0) {
            $(".tip4").css("color", "#FF0512");
            $(".tip4").text("✘请输入密码！");
        } else {
            $("#password").attr("index", "1");
        }

        if (num1.length == 0){
            $("#warn").css("color", "#FF0512");
            $("#warn").text("✘验证码不能为空！");
        }else{
            $("#num").attr("index","1");
        }

        var inx1 = $("#id").attr("index");
        var inx2 = $("#password").attr("index");
        var inx3 = $("#num").attr("index");

        //进行二次判断通过后连接数据库查询
        if(inx1==1&&inx2==1&&inx3==1)
        {
            if (num1==code1)
            {$.ajax
            ({
                type: "POST",
                url: "?c=logintest&a=test",
                data: {username: id1 ,password: pasd},
                dataType: "text",
                success: function (re){
                    if(re==1)
                    {
                        alert("用户名或密码错误!");
                        window.location.reload();
                    }else if(re==2)
                    {
                        alert("登录成功！");
                        window.location.href="?c=Usersinfo&a=index";
                    }else if(re==3)
                    {
                        alert("admin登录！");
                        window.location.href="?c=Admin&a=index";
                    }
                }
            })
            }else
            {
                alert("验证码错误，请重试！");
                //刷新验证码
                $("#num").val("");
                randnum();
            }
        }
    });
</script>
</html>